{% block content %}

<!-- 引入Bootstrap CSS和JS -->
<link href='{% static "bootstrap/bootstrap.min.css" %}' rel='stylesheet'>
<script src='{% static "bootstrap/jquery-3.6.0.min.js" %}'></script>
<script src='{% static "bootstrap/bootstrap.bundle.min.js" %}'></script>
<script src='{% static "fullcalendar/index.global.min.js" %}'></script>
<script src='{% static "fullcalendar/zh-cn.global.min.js" %}'></script>
<link rel="stylesheet" href="{% static 'fullcalendar/fullcalendar.min.css' %}">
<link rel="stylesheet" href="{% static 'css/fullcalendar_styles.css' %}">
<!-- 页面内容 -->
<div class="container mt-4 mb-6">
   <div class="card rounded-xl overflow-hidden shadow-xl border-0 mb-8">
      <div class="card-header bg-white border-bottom border-gray-100 px-4 py-3">
         <h2 class="h5 font-semibold text-gray-800 mb-0">课程安排日历</h2>
      </div>
      <div class="card-body p-0">
         <div id="calendar" class="w-100"></div>
      </div>
   </div>
</div>

<script>
    // *******************设置FullCalendar**************************
  $(document).ready(function() {
      const calendarEl=$('#calendar')[0];
      const calendar=new FullCalendar.Calendar(calendarEl,{
        locale:'zh-cn',
        initialView:'dayGridMonth',
        slotMinTime: '07:00:00',
        slotMaxTime: '23:00:00',
        headerToolbar: {
          left: 'prev,next today',
          center: 'title',
          right: 'dayGridMonth,timeGridWeek,timeGridDay,multiMonthYear'
        },
        views: {
          dayGridMonth: {
            titleFormat: { year: 'numeric', month: 'long' }
          },
          timeGridWeek: {
            titleFormat: { year: 'numeric', month: 'long', week: 'numeric' }
          },
          timeGridDay: {
            titleFormat: { year: 'numeric', month: 'long', day: 'numeric' }
          },
          multiMonthYear: {
            titleFormat: { year: 'numeric' }
          }
        },
        eventSources: [
            {
              url: '{% url 'core:get_course_by_classid' class_id=class_id %}',
              color: 'blue',
              className: 'class-course-event'
            },
            {
              url: '{% url 'core:grade_schedule_by_gradeid' grade_id=grade_id %}',
              color: 'green',
              className: 'grade-schedule-event'
            }
          ]
      });
      calendar.render();
  });
</script>

{% endblock %}


